<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>我的订单</title>
    <link href="/src/image/favicon.ico" type="image/x-icon" rel=icon>
    <link href="/src/image/favicon.ico" type="image/x-icon" rel="shortcut icon">
    <link rel="stylesheet" href="/src/font/iconfont.css">
    <link rel="stylesheet" href="/src/libs/weui.min.css">
    <link rel="stylesheet" href="/src/libs/jquery-weui.min.css">
    <!-- build:css -->
    <link rel="stylesheet" href="/css/style.css">
    <!-- endbuild -->
    <script id="script" src="/src/libs/require.min.js" defer async="true" require-module="./order_list"
            data-main="/src/js/config.js"></script>
    <style type="text/css">
        .weui-form-preview__btn:active {
            color: #686868;
        }

        .weui-navbar__item.weui-bar__item--on {
            background: #eaeaea;
            color: #414141;
        }

        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
        }

        .order-list-block:before {
            border-top: none;
        }

        .weui-navbar__item div {
            position: absolute;
            width: 60%;
            left: 20%;
            height: 4px;
            background: #EAEAEA;
            top: 47px;
        }

        .weui-bar__item_on div {
            background: #2CC27B !important;
        }

        .weui-navbar__item {
            background: #eaeaea;
            color: #414141;
        }

        #order-list a:after {
            border-right: none;
        }

        .condition-choose {
            width: 100%;
            height: 53px;
        }

        .condition-choose li {
            float: left;
            width: 40%;
            margin: 10px 5%;
            padding: 0.2rem 0rem;
            /*padding: ;*/
            background: #f0f2f5;
            color: #232326;
            font-size: 14px;
        }

        .condition-choose li.active {
            color: #2BC17A;
        }

        .condition-choose li span {
            display: inline-block;
            padding-left: 1rem;

        }

        .condition-choose li i {
            display: inline-block;
            font-size: 14px;
            margin-left: 10px;
            margin-top: -3px;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .option-box {
            position: absolute;
            width: 100%;
            background: #fff;
            z-index: 999;
            left: 0;
            right: 0;
        }

        .option-box li {
            margin: 10px 20px;
            line-height: 2rem;
            color: #666;
            /*padding:  0;*/
            border-bottom: 1px solid #FFF;
        }

        .option-box li i {
            display: none;
        }

        .option-box li.active {
            color: #2BC17A;
            border-bottom: 1px solid #2BC17A;
        }

        .option-box li.active i {
            display: inline-block;
            color: #2BC17A;
        }

        .cover-floor {
            display: none;
            position: absolute;
            top: 108px;
            bottom: 0;
            width: 100%;
            background: rgba(0, 0, 0, .5);
            height: 240px;
            z-index: 999;
        }

        .option-box ul {
            display: none;
        }

        .dropload-up, .dropload-down {
            position: relative;
            height: 0;
            overflow: hidden;
            font-size: 12px;
            /* 开启硬件加速 */
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }


        .dropload-refresh, .dropload-update, .dropload-load, .dropload-noData {
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

        .dropload-load .loading {
            display: inline-block;
            height: 15px;
            width: 15px;
            border-radius: 100%;
            margin: 6px;
            border: 2px solid #666;
            border-bottom-color: transparent;
            vertical-align: middle;
            -webkit-animation: rotate 0.75s linear infinite;
            animation: rotate 0.75s linear infinite;
        }

        @-webkit-keyframes rotate {
            0% {
                -webkit-transform: rotate(0deg);
            }
            50% {
                -webkit-transform: rotate(180deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(180deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>


<body ontouchstart>

<div class="container">

    <div class="page">
        <div class="page__bd" style="height: 100%;">
            <div class="weui-tab">
                <div class="weui-navbar">
                    <div class="weui-navbar__item weui-bar__item_on" state="">所有订单
                        <div></div>
                    </div>
                    <div class="weui-navbar__item" state="1">未付款
                        <div></div>
                    </div>
                    <div class="weui-navbar__item" state="2">已付款
                        <div></div>
                    </div>

                </div>
                <div class="weui-tab__panel" style="background: #F0F0F0;">
                    <div class="clearfix" style="background: #fff;overflow:hidden;">
                        <ul class="condition-choose clearfix">
                            <li class="active"><span data-value="2">付款方式</span><i class="iconfont icon-xiala"></i></li>
                            <li><span data-value="1">配送方式</span><i class="iconfont icon-xiala"></i></li>
                        </ul>

                    </div>
                    <div id="order-box" style="overflow-y:auto;">
                    </div>
                </div>

            </div>
        </div>

    </div>


    <!--


    <div class="layout-root">
        <div class="weui-navbar clearfix" id="order-list">
            <a class="weui-navbar__item weui-bar__item&#45;&#45;on weui-tab__bd-item&#45;&#45;active" state="" id="all">所有订单
                <div class="active_div"></div>
            </a>
            <a class="weui-navbar__item" id="noPay" state="1">未付款
                <div></div>
            </a>
            <a class="weui-navbar__item" id="pay" state="2">已付款
                <div></div>
            </a>
        </div>
        <div class="clearfix" style="padding-top:50px;background: #fff;">
            <ul class="condition-choose clearfix">
                <li class="active"><span data-value="2">在线付款</span><i class="iconfont icon-xiala"></i></li>
                <li><span>等待配送</span><i class="iconfont icon-xiala"></i></li>
            </ul>

        </div>

        <div id="order-box" style="overflow-y:auto;margin-top: 10px;">

        </div>-->
    <script type="text/html" id="order-box-tpl">
        {{each dataList as value i}}
        <div class="weui-cells order-list-block"
             style="margin-top:0;background: #fff;border-top: 10px solid #F0F0F0;">
            <div style="position: relative;padding-bottom: 15px;padding-top: 15px;">
                <a href="/page/order_detail.html?id={{value.orderNumber}}" class="clearfix">
                    <span style="color: #999;font-size: 14px;padding-left: 15px;">订单号：{{value.orderNumber}}</span>
                </a>
                <div style="position:absolute;right:15px;top:12px;">
                    {{if value.payState==1}}
                    <a href="pay_check.html?orderNumber={{value.orderNumber}}&price={{value.totalAmount}}"
                       class="weui-btn weui-btn_disabled weui-btn_mini"
                       style="color: #fff;background: #2BC17A;">去付款</a>
                    {{/if}}
                </div>
            </div>
            <label class="weui-cell weui-check__label">
                <div class="weui-cell__bd">
                    {{each value.orderDetailsList as value2 j}}
                    {{if j < 5}}
                    <a href="javascript:;">
                        <img src="{{value2.image}}" style="width: 50px;  height: 50px; float: left;margin-right: 10px;">
                    </a>
                    {{/if}}
                    {{/each}}
                </div>
            </label>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p style="color: #07141e;font-size: 14px;">下单时间：{{value.createTime}}</p>

                    <p>
                        <span style="font-size: 14px;">订单金额：</span>
                        <span style="color:#FF715B;">¥{{value.paidAmount /100}}</span>
                    </p>

                    <p class="clearfix"><span style="color: #07141e;color: #838383;font-size:14px;float: left">{{value.payment.name}}
                    &nbsp&nbsp&nbsp&nbsp
                    {{if value.logisticsState==0}}未配送 {{else if value.logisticsState==1}}等待配送
                    {{else if value.logisticsState==2}}已配送{{else if value.logisticsState==3}}已确认收货
                    {{/if}}</span>
                        <a href="javascript:void(0);" class="send-modal" oNum="{{value.orderNumber}}"
                           style="color: #2BC17A;font-size: 14px;float: right;">再次购买</a>
                    </p>
                </div>
            </div>
        </div>
        {{/each}}
    </script>


    <div class="cover-floor">
        <div class="option-box">
            <ul>
                <li class="clearfix active">
                    <span class="fl" data-value="2">在线付款</span>
                    <i class="iconfont icon-gou fr"></i>
                </li>
                <li class="clearfix">
                    <span class="fl" data-value="3">累计结算</span>
                    <i class="iconfont icon-gou fr"></i>
                </li>
                <li class="clearfix">
                    <span class="fl" data-value="1">货到付款</span>
                    <i class="iconfont icon-gou fr"></i>
                </li>
            </ul>
            <ul>
                <li class="clearfix active">
                    <span class="fl" data-value="1">等待配送</span>
                    <i class="iconfont icon-gou fr"></i>
                </li>
                <li class="clearfix">
                    <span class="fl" data-value="2">已配送</span>
                    <i class="iconfont icon-gou fr"></i>
                </li>
                <li class="clearfix">
                    <span class="fl" data-value="3">已确认收货</span>
                    <i class="iconfont icon-gou fr"></i>
                </li>
            </ul>
        </div>
    </div>
</div>


</body>

</html>
